<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>user</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/header.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css"/>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/vue/vue.min.js"></script>
</head>
<style>
    body {
        background-image: url("${pageContext.request.contextPath}/static/images/book3.jpg");
        background-position: left top, right bottom;
    }
</style>
<body class="img">
<div class="container header">
    <div>
        <button class="btn btn-warning" style="margin-left: 600px;"><a
                href="${pageContext.request.contextPath}/index.jsp"
                style="color: #861bbb">返回主页</a></button>
        <h1 align="center" style="font-family: '宋体', Arial, Helvetica, sans-serif;color:#044962;">管理员登陆</h1><br>
    </div>
    <div class="col-md-4 col-lg-4"></div>
    <div class="col-md-4 col-lg-4" id="v1">
        <form action="#" method="post">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                        <label for="a1">用户名</label><input type="text" class="form-control" id="a1" autocomplete="off"
                                                          required="required" placeholder="请输入用户名"/>
                    </div>
                    <div class="col-md-2" style="width: 30px;height: 30px;padding: 0px;margin-top: 28px;">
                        <img src="${pageContext.request.contextPath}/static/images/icon/user.png"
                             width="25px"
                             height="25px">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="row" style="margin-top: 10px">
                    <div class="col-md-10">
                        <label for="a2">密码</label><input :type="swi" class="form-control" id="a2" autocomplete="off"
                                                         required="required" placeholder="请输入密码"/>
                    </div>
                    <div class="col-md-2" style="width: 30px;height: 30px;padding: 0px;margin-top: 30px;">
                        <img :src="isrc" @click="vClick"
                             width="25px"
                             height="25px">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="a4">验证码</label><input type="text" class="form-control" id="a4" autocomplete="off"
                                                          required="required"/>
                    </div>
                </div>
                <div class="col-md-4"><img style="margin-top: 30px" id="a5"
                                           src="${pageContext.request.contextPath}/captcha"
                                           width="60px;"/></div>
            </div>
            <div class="col-md-12 divider"></div>
            <div class="col-md-4" style="color: #9c2f25">{{msg}}</div>
            <div class="col-md-8">
                <input class=" btn btn-primary" type="button" value="登录" id="a3" autocomplete="off"/>&nbsp&nbsp&nbsp
                <%--                <a class=" btn btn-default" href="${pageContext.request.contextPath}/toregister">注册</a>--%>
            </div>
            <%--    <div id="hhh"></div>--%>
    </div>


</div>
</form>
</div>
</body>
<script>
    const reg = /^\S+$/;
    const reg2 = /^[\w#]+$/;
    const reg4 = /^\S{4}$/;
    let vue = new Vue({
        el: "#v1",
        data: {
            ok: false,
            msg: "",
            isrc: "${pageContext.request.contextPath}/static/images/icon/hidepwd.png",
            swi: "password",
            src: "${pageContext.request.contextPath}/captcha",
        },
        methods: {
            check: function () {
                if (!reg.test($("#a1").val())) {
                    this.msg = "请输入用户名!"
                    return;
                } else if (!reg2.test($("#a2").val())) {
                    this.msg = "请输入密码!"
                    return;
                } else if (!reg4.test($("#a4").val())) {
                    this.msg = "请输入正确验证码!"
                    return;
                }
                console.log($("#a1").val(), $("#a2").val(), $("#a4").val())
                this.ok = true;
            },
            vClick: function () {
                if (this.isrc === "${pageContext.request.contextPath}/static/images/icon/hidepwd.png") {
                    this.isrc = "${pageContext.request.contextPath}/static/images/icon/showpwd.png"
                    this.swi = "text"
                } else {
                    this.isrc = "${pageContext.request.contextPath}/static/images/icon/hidepwd.png"
                    this.swi = "password"
                }
            }
        }
    });
    $("#a3").click(function () {
        vue.check();
        if (vue.ok) {
            $.ajax({
                type: "post",
                url: "${pageContext.request.contextPath}/adminlog",
                data: {
                    controllerName: $("#a1").val(),
                    controllerPassword: $("#a2").val(),
                    code: $("#a4").val()
                },
                dataType: "text",
                success: function (res) {
                    console.log(res);
                    if (res == 1) {
                        window.location = "${pageContext.request.contextPath}/admin/toadminAction";
                    } else {
                        res = $.trim(res)
                        if (res == "验证码错误") {
                            vue.msg = res;
                            <%--"${pageContext.request.contextPath}/captcha"--%>
                        } else vue.msg = "账号或密码错误！"
                    }
                }
            });
        }
        vue.ok = false;
    });
    $("#a5").click(function () {
        this.src = "${pageContext.request.contextPath}/captcha";
    });
</script>
</html>
